<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
          产成品统计分析详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <StrokeTitle title="统计分析" class="float margin" style="width: 63.5%">
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="Echarts flex_center">
            <PieImg
              style="width: 53%"
              :data="top1"
              itemWidth="1.1"
              cirLeft="center"
              legendLeft="center"
              cirTop="0.85"
              length="12"
              orient="horizontal"
              legendBottom="5%"
              :img="require('@/assets/images/echarts/zbccptj.png')"
            />
            <div class="backBor"></div>
            <div class="chanliang_box flex_center_direction">
              <StrokeOrnament title="产量最多"></StrokeOrnament>
              <div class="chanliang_item flex_center">
                <div class="chanliang_item_left flex_center_direction">
                  <img src="@/assets/images/echarts/chanchengpin.png" alt="" />
                  <div class="title">
                    {{ top2[0].name }}
                  </div>
                </div>
                <div class="chanliang_item_right flex_center">
                  <div class="item flex_center_direction">
                    <div class="number text_shadow">
                      {{ $formatNum(top2[0].value) }}
                    </div>
                    <div class="title">产量</div>
                  </div>
                  <div class="backBor"></div>
                  <div
                    class="item flex_center_direction"
                    v-if="top2[0].baifenbi > 0"
                  >
                    <div class="number text_shadow fontSize">
                      {{ top2[0].baifenbi }}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" />
                    </div>
                    <div class="title">占比</div>
                  </div>
                  <div class="item flex_center_direction" v-else>
                    <div class="number text_shadow_danger">
                      {{ 22 }}%
                      <img src="@/assets/images/echarts/jiang.png" alt="" />
                    </div>
                    <div class="title">占比</div>
                  </div>
                </div>
              </div>
              <StrokeOrnament title="上期产量最多"></StrokeOrnament>
              <div class="chanliang_item flex_center">
                <div class="chanliang_item_left flex_center_direction">
                  <img src="@/assets/images/echarts/chanchengpin.png" alt="" />
                  <div class="title">
                    {{ top2[1].name }}
                  </div>
                </div>
                <div class="chanliang_item_right flex_center">
                  <div class="item flex_center_direction">
                    <div class="number text_shadow fontSize">
                      {{ $formatNum(top2[1].value) }}
                    </div>
                    <div class="title">产量</div>
                  </div>
                  <div class="backBor"></div>
                  <div
                    class="item flex_center_direction"
                    v-if="top2[1].baifenbi > 0"
                  >
                    <div class="number text_shadow">
                      {{ top2[1].baifenbi }}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" />
                    </div>
                    <div class="title">占比</div>
                  </div>
                  <div class="item flex_center_direction" v-else>
                    <div class="number text_shadow_danger">
                      {{ 22 }}%
                      <img src="@/assets/images/echarts/jiang.png" alt="" />
                    </div>
                    <div class="title">占比</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="单一产量最大基地"
          class="float margin"
          style="width: 34.5%"
        >
          <div style="width: 100%; height: 100%" class="flex_center">
            <div class="clzdjd_box">
              <div
                class="clzdjd_item flex_center"
                v-for="(item, index) in top3"
                :key="index"
              >
                <div class="clzdjd_item_left flex_between">
                  <!-- 左侧圆球 -->
                  <div class="bigCir flex_center">{{ index + 1 }}</div>
                  <!-- 竖线 -->
                  <div class="border"></div>
                  <!-- 小圆 -->
                  <div class="smallCir flex_center">
                    <div></div>
                  </div>
                </div>
                <div class="clzdjd_item_right flex_center">
                  <div class="clzdjd_item_right_water flex_center_direction">
                    <div class="water2 flex_center">
                      {{ item.baifenbi }}%
                      <img
                        class="bigCir"
                        src="@/assets/images/echarts/baijiang.png"
                        :class="item.baifenbi > 0 ? 'imgTransform' : ''"
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="clzdjd_item_right_content flex_center">
                    <div class="item flex_center_direction">
                      <img
                        src="@/assets/images/echarts/chanchengpin.png"
                        alt=""
                      />
                      <div class="title">
                        {{ item.name1 }}
                      </div>
                    </div>
                    <div class="backBor"></div>
                    <div class="item flex_center_direction">
                      <img src="@/assets/images/echarts/jidi2.png" alt="" />
                      <div class="title">
                        {{ item.name2 }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
      </div>
      <div class="bottom">
        <StrokeTitle
          title="当年十二月产成品种类趋势"
          class="float margin"
          style="width: 33.5%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
          </div>
          <div class="Echarts">
            <ELine :data="bottom1" />
          </div>
        </StrokeTitle>
        <StrokeTitle
          title="计划外产成品统计分析"
          class="float margin"
          style="width: 64.5%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange"
            />
            <ElementSelect
              ref="psNameSelect"
              :data="selectList"
              :isSelected="true"
              @select="selectList"
            />
          </div>
          <div class="Echarts flex_center">
            <XRow
              style="width: 49%; height: 85%"
              :data="bottom2"
              barRight="19%"
              xUnit="次"
            ></XRow>
            <div class="backBor"></div>
            <PieImg
              style="width: 49%"
              itemWidth="1"
              legendType=""
              legendLeft="50%"
              length="7"
              :img="require('@/assets/images/echarts/zbscjh.png')"
            />
          </div>
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      //统计分析
      top1: [
        { name: "产品一", value: 123 },
        { name: "产品二", value: 221 },
        { name: "产品三", value: 123 },
        { name: "产品四", value: 124 },
        { name: "产品五", value: 124 },
        { name: "产品五", value: 124 },
        { name: "产品六", value: 123 },
        { name: "产品七", value: 221 },
        { name: "产品九", value: 123 },
        { name: "产品十", value: 124 },
        { name: "产品十一", value: 124 },
      ],
      top2: [
        { name: "产成品一", value: 23444, baifenbi: 24 },
        { name: "产成品二", value: 123644, baifenbi: -24 },
      ],
      top3: [
        { name1: "产成品一", name2: "仰口基地", baifenbi: 24 },
        { name1: "产成品二", name2: "仰口基地", baifenbi: -24 },
        { name1: "产成品三", name2: "仰口基地", baifenbi: -14 },
      ],
      bottom1: [
        { name: "1号", value: 43 },
        { name: "2号", value: 24 },
        { name: "3号", value: 74 },
        { name: "4号", value: 25 },
        { name: "5号", value: 36 },
        { name: "6号", value: 26 },
        { name: "7号", value: 16 },
        { name: "8号", value: 64 },
        { name: "9号", value: 25 },
      ],
      bottom2: [
        { name: "仰口基地", value: "123" },
        { name: "北龙口基地", value: "321" },
        { name: "崂峰口基地", value: "123" },
        { name: "崂东口基地", value: "124" },
        { name: "崂石口基地", value: "243" },
        { name: "崂泉口基地", value: "218" },
        { name: "崂河口基地", value: "142" },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>
<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .top {
      width: 100%;
      height: 53.6%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .chanliang_box {
        width: 47%;
        height: 90%;
        // background: red;
        max-height: 300px;
        .chanliang_item {
          width: 100%;
          height: 30%;
          background: red;
          max-width: 385px;
          max-height: 124px;
          background: linear-gradient(
            180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%
          );
          border: 1px solid rgba(52, 134, 218, 0.6);
          margin: 14px 0 30px 0;
          .chanliang_item_left {
            width: 30%;
            // background: red;
            height: 100%;
            border-bottom: 2px solid #00c0ff;
            img {
              width: 50%;
            }
            .title {
              font-size: 16px;
              color: #ffffff;
            }
          }
          .chanliang_item_right {
            width: 68%;
            height: 70%;
            position: relative;
            // background: red;
            .item {
              width: 48%;
              height: 60%;
              .number {
                font-weight: 700;
                text-shadow: none;
                letter-spacing: 1px;
                position: relative;
                img {
                  position: absolute;
                  width: 10px;
                }
              }
              .title {
                color: #ffffff;
                margin-top: 3px;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .clzdjd_box {
      width: 100%;
      height: 80%;
      max-height: 350px;

      .clzdjd_item {
        height: 100%;
        height: 30%;
        margin: 0 0px 14px 0;
        .clzdjd_item_left {
          width: 13%;
          height: 100%;
          max-width: 385px;
          max-height: 124px;
          position: relative;
          .bigCir {
            width: 50px;
            height: 50px;
            background: url("../../assets/images/echarts/yuanquan.png");
            background-size: 100% 100%;
            color: #ffffff;
          }
          .index {
            position: absolute;
            color: #ffffff;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
          }
          .border {
            width: 1px;
            height: calc(100% + 14px);
            background: #42a9ff;
            position: absolute;
            right: 0;
            top: 50%;
          }
          .smallCir {
            width: 13px;
            height: 13px;
            background: rgba(66, 169, 255, 0.3);
            border-radius: 50%;
            position: relative;
            left: 5px;
            div {
              width: 7px;
              height: 7px;
              background: #42a9ff;
              border-radius: 50%;
            }
          }
        }
        .clzdjd_item_right {
          width: 66%;
          height: 100%;
          margin-left: 6%;
          max-width: 435px;
          max-height: 124px;
          background: linear-gradient(
            180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%
          );
          border: 1px solid rgba(52, 134, 218, 0.6);
          //  background: red;
          .clzdjd_item_right_water {
            width: 30%;
            // background: red;
            height: 100%;
            border-bottom: 2px solid #00c0ff;
            .water2 {
              width: 70px;
              height: 70px;
              font-size: 22px;
              color: #ffffff;
              position: relative;
              img {
                position: absolute;
                width: 7px;
                right: 4px;
                top: 22px;
              }
              .imgTransform {
                transform: rotate(180deg);
                -ms-transform: rotate(180deg); /* IE 9 */
                -moz-transform: rotate(180deg); /* Firefox */
                -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
                -o-transform: rotate(180deg); /* Opera */
              }
            }
          }
          .clzdjd_item_right_content {
            width: 68%;
            height: 70%;
            position: relative;
            // background: red;

            .item {
              width: 48%;
              height: 60%;
              img {
                width: 50%;
              }
              .title {
                font-size: 14px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .clzdjd_item:last-child .border {
        width: 0 !important;
      }
    }
    .bottom {
      width: 100%;
      height: 41.6%;
    }
  }
}
</style>

